<template>
  <el-container>
      <el-header>
        <DoctorSearch @inputEvent="onSearch" ref="searchDom"></DoctorSearch>
      </el-header>
      <el-main class="doctor-main">
        <DoctorCard v-for="item in searchList" :docInfo="item" :key="item.id"></DoctorCard>
      </el-main>
  </el-container>

</template>

<script>
import DoctorSearch from "../../components/admin/DoctorSearch";
import DoctorCard from "../../components/admin/DoctorCard";
export default {
  name: "AdminDoctor",
  components: {DoctorCard, DoctorSearch},
  data() {
    return {
      inputName: '',
      inputDepartment:'',
      searchValue: ''
    }
  },
  methods:{
    onSearch(event){
      this.searchValue = event
    },
  },
  computed: {
    docInfo() {
      const data = this.$store.state.adminModules.docInfo
      return data.map(item => {
        return {
          id: item.id,
          doctorPhoto: item.avatar,
          doctorName: item.name,
          doctorDepartment: item.indicationDirection,
          doctorTitle: item.title,
        }
      })
    },
    searchList(){
     if (this.searchValue === '')  return this.docInfo
      return this.docInfo.filter(item => JSON.stringify(item).indexOf(this.searchValue) !== -1)
    }
    },
  async mounted() {
    await this.$store.dispatch("getDocInfo")
  },
}
</script>

